import React from "react";
import { useSelector, useDispatch } from "react-redux";

import { Button } from "antd";

import { store as arrObj } from "../store/module/arr.js";

export default function Pages1() {
  // 使用useSelector获取redux中的数据
  const { num, arr } = useSelector((state) => ({
    num: state.Num.num,
    arr: state.Arr.arr,
  }));
  // 使用 useDispatch 修改redux中的数据
  const dispatch = useDispatch();
  const numChange = () => {
    // dispatch({type:"",value}),type是一个字符串，根绝这个字符串来修改state中的数据，value是一个参数
    dispatch({ type: "addNum" });
    // dispatch({type:"addNum1",value:10});
  };
  const arrChange = () => {
    dispatch({ type: "arrPush", value: 100 });
    // dispatch({type:"addNum1",value:10});
  };
  const asysArrChange = () => {
    // 异步操作redux，目前没看到这样封装的实用性在哪（主要如果需要传参还是需要在外层再封装一层函数）
    dispatch(arrObj.asyncAction.asysArrPush);
  };

  const loading = () => {
    dispatch({ type: "showLoading" });
    setTimeout(() => {
      dispatch({ type: "hideLoading" });
    }, 2000);
  };

  return (
    <div>
      <h1>Pages1</h1>
      <div style={{ marginTop: "10px", marginBottom: "10px" }}>{num}</div>
      <Button type="primary" onClick={numChange}>
        numChange
      </Button>
      <div style={{ marginTop: "10px", marginBottom: "10px" }}>{arr}</div>
      <Button type="primary" onClick={arrChange}>
        arrChange
      </Button>
      <Button
        style={{ marginLeft: "10px" }}
        type="primary"
        onClick={asysArrChange}
      >
        异步push
      </Button>
      <Button style={{ marginLeft: "10px" }} type="primary" onClick={loading}>
        loading使用
      </Button>
    </div>
  );
}
